<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wemoney - Dashboard</title>
    <!-- font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ url_for('static', filename='font/bootstrap-icons.css') }}">
    <!-- bootstrap -->
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-5.1.3-dist/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

    <style>
        th {
            vertical-align: middle;
            text-align: center;
        }

        tr th:first-child {
            width: 20px;
        }

        .form-check {
            width: 20px;
        }

        #info .row {
            padding: 10px 0;
        }

        a{
            text-decoration-line: none;
        }
    </style>
</head>

<body>
    <div class="dashboard-pg text-grey-blue">
        <nav class="navigation-bar d-flex align-items-center">
            <div class="container">
                <div class="row align-items-center">
                    <div class="navigation-bar-left col-4 d-flex align-items-center">
                        <button type="button" class="navbar-open-btn text-grey-blue me-3">
                            <i class="bi bi-list h3"></i>
                        </button>
                        <!-- <div class="navbar-logo">
                            <img src="assets/images/logo.png" alt="site logo">
                        </div> -->
                    </div>
                    <div class="col-4 h3 text-center ">图书管理系统</div>
                    <div class="navigation-bar-right col-4 d-flex align-items-center justify-content-end">
                        <span class="col-2">{{session['nick_name']}}</span>
                        <a href="{{ url_for('usr.center') }}" id="user" class="profile-btn bg-blue text-white btn-circle ms-1">
                            <i class="bi bi-person-fill fs-20"></i>
                        </a>
                        <!-- <button type="button" class="notification-btn text-grey-blue">
                            <i class="fa-regular fa-bell"></i>
                        </button> -->
                    </div>
                </div>
            </div>
        </nav>

        <div class="navigation-overlay position-fixed"></div>

        <div class="navigation-sidebar bg-light-grey">
            <div class="navbar-sb-head d-flex justify-content-between align-items-center px-4">
                <!-- <img src="assets/images/logo.png"> -->
                <span>{{session['nick_name']}}</span>
                <button class="navbar-close-btn text-grey-blue">
                    <i class="bi bi-arrow-left"></i>
                </button>
            </div>

            <div class="navbar-sb-list p-4">
                <div class="navbar-sb-item mb-5">
                    <h5 class="text-uppercase text-grey navbar-sb-item-title fs-12 ls-1">功能区</h5>
                    <ul class="navbar-sb-links p-0 list-unstyled">
                        <li class="navbar-sb-link my-3">
                            <a href="{{ url_for('book_manage.books_getall') }}" class="text-decoration-none d-flex align-items-center justify-content-between">
                                <div class="text-light-blue d-flex align-items-center">
                                    <span class="navbar-sb-icon me-3">
                                        <i class="bi bi-book"></i>
                                    </span>
                                    <span class="navbar-sb-text fs-14 fw-5 text-capitalize">查看图书</span>
                                </div>
                                <!-- <span class="badge text-uppercase text-blue">hot</span> -->
                            </a>
                        </li>
                       
                        <li class="navbar-sb-link my-3">
                            <a href="{{url_for('usr.my_borrow')}}" class="text-decoration-none d-flex align-items-center justify-content-between">
                                <div class="text-light-blue d-flex align-items-center">
                                    <span class="navbar-sb-icon me-3">
                                        <i class="bi bi-list-ul"></i>
                                    </span>
                                    <span class="navbar-sb-text fs-14 fw-5 text-capitalize">我的借阅</span>
                                </div>
                                <!-- <span class="badge text-uppercase text-blue">new</span> -->
                            </a>
                        </li>

                        <li class="navbar-sb-link my-3">
                            <a href="{{ url_for('usr.center') }}" class="text-decoration-none d-flex align-items-center justify-content-between">
                                <div class="text-light-blue d-flex align-items-center">
                                    <span class="navbar-sb-icon me-3">
                                        <i class="bi bi-person"></i>
                                    </span>
                                    <span class="navbar-sb-text fs-14 fw-5 text-capitalize">个人中心</span>
                                </div>
                                <!-- <span class="badge text-uppercase text-blue">new</span> -->
                            </a>
                        </li>

                    </ul>
                </div>





                <div class="navbar-sb-item mb-5">
                    <h5 class="text-uppercase text-grey navbar-sb-item-title fs-12 ls-1">用户操作</h5>
                    <ul class="navbar-sb-links p-0 list-unstyled">
                        <li class="navbar-sb-link my-3">
                            <a href="#" class="text-decoration-none d-flex align-items-center justify-content-between">
                                <div class="text-light-blue d-flex align-items-center">
                                    <span class="navbar-sb-icon me-3">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <span class="navbar-sb-text fs-14 fw-5 text-capitalize"><a href="{{url_for('auth.logout')}}" style="display:block;width:100%;height:100%;text-decoration:none;">logout</a></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- 主页面 -->
        <div class="dashboard-main">
            <div class="container">
                <div class="row pt-3">
                    <div class="col-12">
                        <h4 class="col-12 bg-light-grey py-2">用户信息</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" id="info">

            <!-- 修改信息 -->
            

                <!-- 用户名修改 -->
            <div class="row">
                <div class="col-md-6">
                    用户名： <span id="need">{{usr.username}}</span>
                </div>
            </div>

            <!-- 昵称修改 -->
            <form action="{{ url_for('usr.change_info') }}" method="post" class="needs-validation" novalidate>
                <div class="row">
                    <div class="col-md-10">
                        <label for="nickname" class="form-label">昵称： <span id="need">{{usr.nickname}}</span><a class=" ms-3"
                                type="button" data-bs-toggle="collapse" data-bs-target="#newuname" aria-expanded="false"
                                aria-controls="collapseExample">
                                <i class="bi bi-pencil-square"></i>
                                编辑
                            </a></label>
                        <div class="collapse col-6" id="newuname">
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-person"></i></span>
                                <input type="text" class="form-control me-3" name="nickname" id="nickname"
                                    placeholder="请输入新的昵称" value="{{usr.nickname}}" required>

                                <div class="valid-feedback">提交即可修改！</div>
                                <div class="invalid-feedback">请输入昵称！</div>
                                <button type="submit" id="submit" class="btn btn-danger ">提交</button>
                                <button type="button" data-bs-toggle="collapse" data-bs-target="#newuname"
                                    class="btn btn-outline-danger ms-3 cancel">取消</button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>




            <!-- 邮箱修改 -->
           <form action="{{ url_for('usr.change_info') }}" method="post" class="needs-validation" novalidate>
                <div class="row">
                    <div class="col-md-6">
                        <label for="school" class="form-label">学校： <span id="need">{{ usr.school }}</span><a class=" ms-3"
                                type="button" data-bs-toggle="collapse" data-bs-target="#newem" aria-expanded="false"
                                aria-controls="collapseExample">
                                <i class="bi bi-pencil-square"></i>
                                编辑
                            </a></label>
                        <div class="collapse col-10" id="newem">
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-building"></i></span>
                                <input type="text" class="form-control me-3" id="school" name="school"
                                    placeholder="请输入新的学校" required>
                                <div class="valid-feedback">验证成功！</div>
                                <div class="invalid-feedback">请输入学校！</div>
                                <button type="submit" id="submit" class="btn btn-danger">提交</button>
                                <button type="button" data-bs-toggle="collapse" data-bs-target="#newem"
                                    class="btn btn-outline-danger ms-3 cancel">取消</button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>

            <!-- 电话号码修改 -->

            <form action="{{ url_for('usr.change_info') }}" method="post" class="needs-validation" novalidate>
                <div class="row">
                    <div class="col-md-6">
                        <label for="phonenum" class="form-label">电话号码： <span id="need">{{usr.phone}}</span><a class=" ms-3"
                                type="button" data-bs-toggle="collapse" data-bs-target="#newphnum" aria-expanded="false"
                                aria-controls="collapseExample">
                                <i class="bi bi-pencil-square"></i>
                                编辑
                            </a></label>
                        <div class="collapse col-10" id="newphnum">
                            <div class="input-group">
                                <span class="input-group-text">+86</span>
                                <input type="text" class="form-control me-3" pattern="^(?:(?:\+|00)86)?1[3-9]\d{9}$"
                                    maxlength="11" id="phonenum" name="phonenum" placeholder="请输入新的电话号码" required>
                                <div class="valid-feedback">电话号码看起来是有效的！</div>
                                <div class="invalid-feedback">请输入合法电话号码！</div>

                                <button type="submit" id="phonenum" id="submit" class="btn btn-danger ">提交</button>
                                <button type="button" data-bs-toggle="collapse" data-bs-target="#newphnum"
                                    class="btn btn-outline-danger ms-3 cancel">取消</button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>


            <!-- 全部信息修改 -->
            <div class="row mt-2">
                <div class="col-12">
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                        data-bs-target="#edituser">修改全部</button>
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                        data-bs-target="#pswchange">修改密码</button>
                </div>
            </div>

            <form action="{{ url_for('usr.change_info') }}" method="post" class="needs-validation" novalidate>
                <div class="modal fade" id="edituser" tabindex="-1" aria-labelledby="a" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="a">个人信息修改</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" readonly id="username" placeholder="请输入用户名">
                                </div>
                                <div class="mb-3">
                                    <label for="nickname" class="form-label">昵称</label>
                                    <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入昵称" required>
                                    <div class="valid-feedback">成功！</div>
                                    <div class="invalid-feedback">请输入用昵称！</div>
                                </div>

                                <div class="mb-3">
                                    <label for="school" class="form-label">学校</label>
                                    <input type="text" class="form-control" name="school" id="school" placeholder="请输入学校" required>
                                    <div class="valid-feedback">验证成功！</div>
                                    <div class="invalid-feedback">请输入用户名！</div>
                                </div>

                                <div class="mb-3">
                                    <label for="phonenum" class="form-label">电话</label>
                                    <input type="text" pattern="^(?:(?:\+|00)86)?1[3-9]\d{9}$" maxlength="11"
                                        class="form-control" name="phonenum" id="phonenum" placeholder="请输入电话" required>
                                    <div class="valid-feedback">验证成功！</div>
                                    <div class="invalid-feedback">请输入合法电话！</div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-danger">修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!-- 修改密码 -->
            <!-- 密码修改表单 -->
<!--            <form action="{{ url_for('usr.change_pass') }}" method="post" onsubmit="return checkForm()">-->
                <!-- 模态框 -->
                <div class="modal fade" id="pswchange">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h5 class="modal-title">请注意您即将修改密码</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <!-- 模态框内容 -->
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="originpsw" class="form-label">原密码</label>
                                    <input type="password" class="form-control" name="origin" id="originpsw" placeholder="请输入原密码">
                                    <div id="oripassword_msg"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="password" class="form-label">新密码</label>
                                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入新密码">
                                    <div id="password_msg"></div>
                                </div>

                                <div class="mb-3">
                                    <label for="repassword" class="form-label">重复密码</label>
                                    <input type="password" class="form-control" id="repassword" placeholder="请输入重复密码">
                                    <div id="repassword_msg"></div>
                                </div>
                            </div>

                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button"  class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                <button type="submit" id="pswsubmit" class="btn btn-danger">修改</button>
                            </div>

                        </div>
                    </div>
                </div>
<!--            </form>-->
            <!-- 表单结束 -->

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="fail" tabindex="-1" aria-labelledby="mt" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mt"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery -->


    <script src="{{ url_for('static', filename='js/jQuery.js') }}"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap-5.1.3-dist/js/bootstrap.js') }}"></script>


    <script>
        var fail = new bootstrap.Modal(document.getElementById('fail'));
        var mt = $("#mt");
        var mb = $(".modal-body");

        $(".cancel").click(function () {
            // console.log($("#password").val()); 
            $(this).siblings("input").val("");
            $(this).parent().siblings().find("input").val("");
            // console.log($(this).siblings("input").val());
        });

<!--        //修改密码-->
<!--        $("#pswsubmit").click(function (e){-->
<!--			var origin=$("#orgin").val();-->
<!--			var password=$("#password").val();-->
<!--				$.post("{{ url_for('usr.change_pass') }}",{'origin': origin,'password':password},-->
<!--					function (result) {-->
<!--						if(result=="error"){-->
<!--							mt.html("修改失败");-->
<!--							mb.html("请检查原密码输入错误");-->
<!--							fail.show()-->
<!--						}-->
<!--						else{-->
<!--							window.location.href="{{url_for('usr.center')}}";-->
<!--						}-->
<!--					});-->
<!--		});-->


        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // 获取表单验证样式
                var forms = document.getElementsByClassName('needs-validation');
                // 循环并禁止提交
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        $('#edituser').on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var a = button.parent().parent();
            console.log(a.siblings("form").find('span').text());
            for (let i = 0; i < 5; i++) {
                $(this).find(".mb-3").eq(i).children("input").val(a.siblings().eq(i).find('span#need').text())
            }
        });
        function ifnull(txt) {
            if (txt.length == 0) {
                return true;
            }
            var $reg = /\s+/;
            return $reg.test(txt);
        }
        $('#pswchange').on('show.bs.modal', function () {
            $(this).find(".btn-danger").click(function (e) {
                var origin=$("#originpsw").val();
                var password=$("#password").val();
                var repassword=$("#repassword").val();
                console.log(password);
                console.log(origin);
                if (ifnull($("#originpsw").val())) {
                    $("#oripassword_msg").html("密码不能为空！");
                    $("#oripassword_msg").attr("class","text-danger");
                    e.preventDefault();
                }
                else if (!/^\w{6,}$/.test($("#originpsw").val())) {
                    $("#oripassword_msg").html("密码至少6位");
                    $("#oripassword_msg").attr("class","text-danger");
                    e.preventDefault();
                }
                //验证密码
                else if (ifnull($("#password").val())) {
                    $("#password_msg").html("密码不能为空");
                    $("#password_msg").attr("class","text-danger");
                    e.preventDefault();
                }
                else if (!/^\w{6,}$/.test($("#password").val())) {
                    $("#password_msg").html("密码至少6位");
                    $("#password_msg").attr("class","text-danger");
                    e.preventDefault();
                }
                //确认密码是否为空
                else if (ifnull($("#repassword").val())) {
                    $("#repassword_msg").html("请确认密码");
                    $("#repassword_msg").attr("class","text-danger");
                    e.preventDefault();
                }
                //验证两次密码是否一致
                else if ($("#password").val() != $("#repassword").val()) {
                    $("#repassword_msg").html("两次密码不一致");
                    $("#repassword_msg").attr("class","text-danger");
                    e.preventDefault();
                }
                else {
                        console.log(111);
                       $.post("{{ url_for('usr.change_pass') }}", { 'origin': origin, 'password': password }, function (result) {
                       if(result=="error"){
                            alert("原密码错误");
                       }
                       else{
							window.location.href="{{url_for('usr.center')}}";
					    }
                   });
                }
            });
            $("#originpsw").on("input",(function () {
                if (ifnull($(this).val())) {
                    $("#oripassword_msg").html("密码不能为空！");
                    $("#oripassword_msg").attr("class","text-danger");
                    
                } else {
                    var $reg = /^\w{6,}$/;
                    if (!$reg.test($("#originpsw").val())) {
                        $("#oripassword_msg").html("密码至少要6位哦");
                        $("#oripassword_msg").attr("class","text-danger");
                    } else {
                        $("#oripassword_msg").html("验证成功！");
                        $("#oripassword_msg").attr("class","text-success");
                    }
                }
            }));


            $("#password").on("input",(function () {
                if (ifnull($(this).val())) {
                    $("#password_msg").html("密码不能为空");
                    $("#password_msg").css("color", "red");
                } else {
                    var $reg = /^\w{6,}$/;
                    if (!$reg.test($("#password").val())) {
                        $("#password_msg").html("密码至少要6位哦");
                        $("#password_msg").attr("class","text-danger");
                    } else {
                        $("#password_msg").html("验证成功");
                        $("#password_msg").attr("class","text-success");
                    }
                }
            }));


            $("#repassword").on("input",(function () {
                if (ifnull($(this).val())) {
                    $("#repassword_msg").html("请确认密码");
                    $("#repassword_msg").attr("class","text-danger");
                } else {
                    if ($("#password").val() != $("#repassword").val()) {
                        $("#repassword_msg").html("两次密码不一致");
                        $("#repassword_msg").attr("class","text-danger");
                    } else {
                        $("#repassword_msg").html("验证成功");
                        $("#repassword_msg").attr("class","text-success");
                    }
                }
            }));
        });

    </script>
    

</body>

</html>